/*
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2025-04-12 22:01:48
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2025-04-13 14:42:20
 * @FilePath: \leemvvm\lee-mvvm\src\playground\Counter.ts
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved.
 */
import { reactive } from "../core/reactivity/reactive";
import { watch } from "../core/reactivity/watch";
import { effect } from "../core/reactivity/effect";
import template from "./Counter.html?raw";
import { onMounted, onUpdated, onUnmounted } from "../core/lifecycle/lifecycle";

export default {
  setup() {
    const state = reactive({ count: 100 });

    // 生命周期钩子：onMounted 组件挂载时
    onMounted(() => {
      console.log("组件挂载时onMounted: Counter");
    });

    // 生命周期钩子：onUpdated 组件更新时
    onUpdated(() => {
      console.log("组件更新时onUpdated：" + state.count);
    });

    // 生命周期钩子：onUnmounted 组件卸载时
    onUnmounted(() => {
      console.log("组件卸载时onUnmounted：Counter");
    });

    effect(() => {
      // 这里的副作用会在 count 变化时触发
      console.log("副作用发生了变化:", state.count);
    });

    // 添加监听逻辑
    watch(
      () => state.count,
      (newVal, oldVal) => {
        console.log("子组件 Count 变化:", oldVal, "→", newVal);
      }
    );

    const interval = setInterval(() => {
      if (state.count >= 110) {
        clearInterval(interval);
        return;
      }
      state.count++;
    }, 1000);
    return { state };
  },
  template,
};
